<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery动画</title>
		<style>
		  .pic{
			  border: 1px solid red;
			  border-radius: 50%;
		  }
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
		$(function(){
			$("p button:eq(0)").click(function(){
				$("#o1").show(3000);
			});
			$("p button:eq(1)").click(function(){
				$("#o1").hide(3000);
			});
			$("p button:eq(2)").click(function(){
				$("#o1").fadeIn(3000);
			});
			$("p button:eq(3)").click(function(){
				$("#o1").fadeOut(3000);
			});
			$("p button:eq(4)").click(function(){
				$("#o1").slideDown(2000);
			});
			$("p button:eq(5)").click(function(){
				$("#o1").slideUp(2000);
			});
			$("p button:eq(6)").click(function(){
				var h=$("#o1").height();
				$("#o1").animate({width:0,height:h},3000,function(){
					$("#o1").height(0);
				});
			});
			
			$("div img").hover(function(){
				$(this).addClass("pic");
			},function(){
				$(this).removeClass("pic");
			});
		});
		</script>
	</head>
	<body>
		<div>
			<img src="../day12/4.png" id="o1"/>
		</div>
		<p>
			<button type="button">显示</button>
			<button type="button">隐藏</button>
			<button type="button">淡入</button>
			<button type="button">淡出</button>
			<button type="button">推出</button>
			<button type="button">推入</button>
			
			<button type="button">自定义</button>
		</p>
	</body>
</html>
